<template>
  <div class="app-main-container tabpdding">
    <el-tabs v-model="activeTab">
      <el-tab-pane v-if="meta.indexOf('MemberCardTransacDetails') > -1" :label="$t('message.hyjyls')" name="0"><transactionRecord v-show="activeTab === '0'" /></el-tab-pane>
      <el-tab-pane v-if="meta.indexOf('MemberConsumption') > -1" :label="$t('message.xftj')" name="1"><Consumption v-if="activeTab === '1'" /></el-tab-pane>
      <el-tab-pane v-if="meta.indexOf('ShopMemberRechargeOrder') > -1" :label="$t('message.kkczmx')" name="2"><RechargeList v-if="activeTab === '2'" /></el-tab-pane>
      <el-tab-pane v-if="meta.indexOf('IntegralDetail') > -1" :label="$t('message.jfmx')" name="3"><IntegralDetail v-if="activeTab === '3'" /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import transactionRecord from './transactionRecord'
import Consumption from './memberConsumption'
import RechargeList from './memberRechargeList'
import IntegralDetail from './integralDetail'
export default {
  name: 'TransactionRecord',
  components: {
    transactionRecord,
    Consumption,
    RechargeList,
    IntegralDetail
  },
  data() {
    return {
      activeTab: '',
      meta: []
    }
  },
  created() {
    let activeTab = ''
    const meta = this.$route.meta.buttons || []
    if (meta.indexOf('MemberCardTransacDetails') > -1) {
      activeTab = '0'
    } else if (meta.indexOf('MemberConsumption') > -1) {
      activeTab = '1'
    } else if (meta.indexOf('ShopMemberRechargeOrder') > -1) {
      activeTab = '2'
    } else if (meta.indexOf('IntegralDetail') > -1) {
      activeTab = '3'
    }
    this.activeTab = activeTab
    this.meta = meta
  }

}
</script>

